<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  this取什么值是在函数执行时候被确定的，
  不是在函数定义的时候确定

  场景：
  1.普通函数
  2.使用call apply bind
  3.作为对象方法被调用
  4.class方法被调用
  5.箭头函数


  <script>
    function fn1() {
      console.log(this);
    }
    fn1() // window

    fn1.call({ x: 100 }) // {x:100}

    const fn2 = fn1.bind({ x: 200 })
    fn2() // {x: 200}


    /* const zhangsan = {
      name: 'zhangsan',
      sayHi() {
        console.log(this); // zhangsan
      },
      wait() {
        setTimeout(function() {
          console.log(this); // window
        }, 0)
      }
    } */

    const zhangsan = {
      name: 'zhangsan',
      sayHi() {
        console.log(this); // zhangsan
      },
      wait() {
        setTimeout(() => {
          console.log(this); // zhangsan
        }, 0)
      }
    }


    class People {
      constructor(name) {
        this.name = name
        this.age = 20
      }

      sayHi() {
        console.log(this); 
      }
    }

    const zhangsan = new People('zhangsan')
    zhansan.sayHi() // zhangsan实例






  </script>

</body>

</html>